// src/global.scss

// 1. 定义断点变量
$mobile: 6rem; // 600px -> 6rem
$tablet: 9rem; // 900px -> 9rem

// 2. 全局重置和基础样式
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  width: 100vw;
  min-height: 100vh;
  font-family: 'SF Pro', 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #f8f8f8;
}

// 3. 全局容器样式
.app-container {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

// 4. 响应式：手机
@media (max-width: $mobile) {
  html {
    font-size: 0.14rem; // 14px -> 0.14rem
  }

  .app-container {
    padding: 0 0.04rem; // 4vw 近似 0.04rem
  }
}

// 5. 响应式：平板
@media (min-width: #{$mobile + 0.01rem}) and (max-width: $tablet) {
  html {
    font-size: 0.16rem; // 16px -> 0.16rem
  }

  .app-container {
    padding: 0 0.08rem; // 8vw 近似 0.08rem
  }
}

// 6. 响应式：桌面
@media (min-width: #{$tablet + 0.01rem}) {
  html {
    font-size: 0.18rem; // 18px -> 0.18rem
  }

  .app-container {
    padding: 0 0.2rem; // 20vw 近似 0.2rem
  }
}